{% extends "qinlv_base.html" %}
{% load i18n %}
{% block head %}
    {{ block.super }}
    <style>
    .list > div {
	min-height: 50px;
	border-style: solid;
	border-width: 2px;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
        font-family: serif;
}


.half {
	display: inline-block;
	width: 49%;
	padding: 0;
	margin: 0;
	vertical-align: top;
}
    </style>
{% endblock %}

{% block content %}


<div class="list half" id="list1">
	<div>Item 1.1</div>
	<div>Item 1.2</div>
	<div>Item 1.3</div>
	<div>Item 1.4</div>
	<div>Item 1.5</div>
</div>

<div class="list half" id="list2">
	<div>Item 2.1</div>
	<div>Item 2.2</div>
	<div>Item 2.3</div>
	<div>Item 2.4</div>
	<div>Item 2.5</div>
</div>




         <script src="../../Sortable/modular/sortable.esm.js"></script>

        <script type="text/javascript">
            new Sortable(document.getElementById('list1'), { group: 'shared' });
            new Sortable(document.getElementById('list2'), { });
        </script>


{% endblock %}


